<template>
  <div class="myEquipment">
    <el-dialog title="批量升级" :visible.sync="isDialogShow" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false" width="40%" custom-class="customWidth">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="升级包名称:" :label-width="formLabelWidth">
          <span style="font-size: 20px;font-weight: bold;color: #333333;">{{updateObj.name}}</span>
        </el-form-item>
        <el-form-item label="设备选择方式:" :label-width="formLabelWidth">
          <el-radio-group v-model="ruleForm.type" @change="chengeradio">
            <el-radio :label="1">手动勾选</el-radio>
            <el-radio :label="2">文件上传</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设备列表:" :label-width="formLabelWidth" v-if="ruleForm.type === 1" prop="device_list">
          <div style="display: flex;justify-content: safe;align-items: center;">
            <el-button size="small" type="primary" @click="submitForm(3)">选择设备</el-button>
            <div>（当前已选择 <span style="color: #FF0000;font-size: 18px;"> {{ruleForm.device_list.length}} </span> 台设备）</div>
          </div>
        </el-form-item>
        <el-form-item label="设备列表:" :label-width="formLabelWidth" v-if="ruleForm.type === 2" prop="file">
          <div style="display: flex;align-items: center;">
            <el-upload :on-change="handlePreview" :auto-upload="false" :show-file-list="false" multiple>
              <el-button size="small" type="primary">文件上传</el-button>
            </el-upload>（当前已上传<span style="color: #FF0000;font-size: 18px;"> {{ruleForm.file.length}} </span>台设备）
          </div>
        </el-form-item>
        <!-- <div style="display: flex;flex-direction: column; padding-left: 30px;padding-bottom: 30px;" v-if="ruleForm.type === 2 && ruleForm.file && ruleForm.file.length">
          <div v-for="(item, index) in ruleForm.file" :key="index">
            <span style="padding-right: 20px;line-height: 30px;font-size: 14px;font-weight: 600;">{{item}}</span><i class="el-icon-close" @click="delfile(index)"></i>
          </div>
        </div> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm(2)">取 消</el-button>
        <el-button type="primary" @click="submitForm(1)">确 定</el-button>
      </div>
    </el-dialog>
    <my-equipment v-if="isEquipmentShow" @equipmentEvemt="equipmentEvemt" :idsList="idsss"></my-equipment>
  </div>
</template>
<script>
import { upgradeexecute, commonexcelupload } from 'api/txEquipment/index'
import myEquipment from 'components/myEquipment'
export default {
  data () {
    return {
      isEquipmentShow: false,
      formLabelWidth: '120px',
      formLabelWidth2: '60px',
      ruleForm: {
        type: 1,
        device_list: [],
        file: []
      },
      idsss: [],
      isCheckbox: false,
      formObj: {},
      isDialogShow: true,
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      rules: {
        device_list: [
          { required: true, message: '请选择设备列表', trigger: 'change' }
        ],
        file: [
          { required: true, message: '请上传升级包', trigger: 'change' }
        ]
      },
      lists: []
    }
  },
  props: {
    updateObj: Object
  },
  components: {
    myEquipment
  },
  created () {
  },
  methods: {
    chengeradio () {
      this.$refs['ruleForm'].resetFields()
    },
    delfile (index) {
      this.ruleForm.file.splice(index, 1)
      this.$refs.ruleForm.validateField('file')
    },
    handlePreview (file) {
      // this.ruleForm.fileObj = file
      var formFile = new FormData()
      formFile.append('file', file.raw)
      commonexcelupload(formFile).then(res => {
        console.log(this.ruleForm)
        this.ruleForm.file.push.apply(this.ruleForm.file, res.data.device_list)
        // this.$message({
        //   message: '上传成功',
        //   type: 'success'
        // })
        this.$refs.ruleForm.validateField('file')
      })
    },
    equipmentEvemt (obj) {
      if (obj.type === 1) {
        this.ruleForm.device_list = obj.lists
        this.idsss = obj.lists
      }
      this.$refs.ruleForm.validateField('device_list')
      this.isEquipmentShow = false
    },
    submitForm (num) {
      switch (num) {
        case 1:
          this.$refs['ruleForm'].validate((valid) => {
            if (valid) {
              this.$confirm('确定要执行本次批量升级？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                let pan = {}
                if (this.ruleForm.type === 1) {
                  pan = {upgrade_id: this.updateObj.id, device_list: this.ruleForm.device_list}
                } else {
                  pan = {upgrade_id: this.updateObj.id, device_list: this.ruleForm.file}
                }
                upgradeexecute(pan).then(res => {
                  this.$alert('成功发送升级包批量升级设备！', '提示', {
                    confirmButtonText: '确定',
                    showClose: false,
                    callback: action => {
                      this.$emit('batchUpdateEvenr', {type: 1})
                    }
                  })
                })
              })
            }
          })
          break
        case 2:
          this.$emit('batchUpdateEvenr', {type: 2})
          break
        case 3:
          this.isEquipmentShow = true
          break
      }
    }
  }
}
</script>
<style lang="less">
.myEquipment {
  .customWidth{
    min-width: 560px;
  }
  .width200{width: 200px;}
  .width150{width: 150px;}
  .title {
    overflow: hidden;
    padding: 16px 30px;
    padding-bottom: 0;
  }
  .search-box {
    padding: 0 30px 20px 30px;
    background: #ffffff;
  }
  .data-list {
    padding: 10px 30px;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .titleright{
    float: right;
    margin-left: 20px;
  }
  .miaos{
    padding: 0 30px;
    .text{
      padding-top: 10px;
      span{
        color: #FF0000;
        font-size: 18px;
      }
    }
  }
}
</style>
